{% extends "model-scope.html" %}
{% load static sekizai_tags djng_tags tutorial_tags %}

{% block addtoblock %}
	{{ block.super }}
	{% addtoblock "css" %}<link href="{% static 'djng/css/fileupload.css' %}" rel="stylesheet" />{% endaddtoblock %}
	{% addtoblock "js" %}<script src="{% static 'node_modules/ng-file-upload/dist/ng-file-upload.js' %}" type="text/javascript"></script>{% endaddtoblock %}
	{% addtoblock "js" %}<script src="{% static 'js/djng-fileupload.js' %}" type="text/javascript"></script>{% endaddtoblock %}
	{% add_data "ng-requires" "djng.fileupload" %}

	{% addtoblock "js" %}<script src="{% static 'js/djng-urls.js' %}" type="text/javascript"></script>{% endaddtoblock %}
	{% add_data "ng-requires" "djng.urls" %}

	{% addtoblock "ng-config" %}['$httpProvider', function($httpProvider) { $httpProvider.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest'; $httpProvider.defaults.headers.common['X-CSRFToken'] = '{{ csrf_token }}'; }]{% endaddtoblock %}
{% endblock addtoblock %}

{% block main-intro %}
<h1>Image and File Uploads</h1>
<p class="lead"><span class="badge">New in 1.1</span> Drag and drop images or files into a form</p>
<p>This example shows how to upload an image or file to the server using AngularJS with Ajax.</p>
{% endblock main-intro %}

{% block form_tag %}name="{{ form.form_name }}" djng-endpoint="." ng-model-options="{allowInvalid: true}" novalidate{% endblock %}

{% block form_submission %}
<p>
	<button type="button" class="btn btn-primary" ng-click="do(update()).then(redirectTo())" ng-disabled="isDisabled()">
		Submit
		&emsp;<i class="glyphicon glyphicon-circle-arrow-right"></i>
	</button>
</p>
{% endblock %}

{% block form_foot %}
	{% verbatim %}
		<h5>Scope:</h5>
		<pre>subscribe_data = {{ subscribe_data | json }}</pre>
	{% endverbatim %}
{% endblock form_foot %}

{% block main-tutorial %}
<p>If we want to upload an image or file to the server through an Ajax request, we have to divide
the submission into two steps. This is because browsers can not serialize submitted file payload to
JSON. Instead, we first must upload the image or file to the server encoded as
<code>multipart/form-data</code>. The server then creates a temporary copy of the uploaded image
or file and returns a reference to it. This temporary reference is stored inside a hidden field
of our form.</p>
<p>When the complete form is submitted by the client, only that reference to the temporary file
will be sent through Ajax. The server then moves the previously uploaded copy of that file into
its <code>MEDIA_ROOT</code> directory and stores its location inside a model field.</p>

<p ng-init="tabList=['Form', 'View', 'HTML', 'Model']"></p>
{% endblock main-tutorial %}

{% block main-sample-code %}
{% autoescape off %}
<div ng-show="activeTab==='Form'">{% pygments "forms/image_file_upload.py" %}</div>
<div ng-show="activeTab==='View'">{% pygments "views/image_file_upload.py" %}</div>
<div ng-show="activeTab==='HTML'">{% pygments "tutorial/image-file-upload.html" %}</div>
<div ng-show="activeTab==='Model'">{% pygments "models/image_file_upload.py" %}</div>
{% endautoescape %}

<p class="bg-info">A form accepting files and images without a permanent storage does not make
much sense. Therefore you normally would create a Django model using an <code>django.models.ImageField</code>
and/or <code>django.models.FileField</code>. From this model, you can create a form inheriting from
<code>django.forms.ModelForm</code>, as usual. Image and file fields then are replaced by their
AngularJS enabled counterparts, enabling drag & drop and immediate image preview.<br/>
A sample implementation is shown in the last tab labeled <strong>Model</strong>.</p>
{% endblock main-sample-code %}
